<template>
	<view class="g-main">
		<view class="u-list f-bc-whilte">
			<view class="u-item border-bottom">
				<text class="key min f-fc-primary">类型</text>
				<view class="value" style="text-align: left;">
					<view class="u-tag f-mr12" :class="[dataForm.type === 1 ? 'active' : '']" @tap="selectType(1)">公司</view>
					<view class="u-tag" :class="[dataForm.type === 2 ? 'active' : '']" @tap="selectType(2)">个人</view>
				</view>
			</view>
			<view class="u-item border-bottom">
				<text class="key min f-fc-primary">名称</text>
				<input type="text" v-model="dataForm.name" @input="inputHandler($event, dataForm, 'name')" placeholder="请填写准确的抬头名称" class="value" placeholder-class="ph" />
			</view>
			<block v-if="dataForm.type === 1">
				<view class="u-item border-bottom">
					<text class="key min f-fc-primary">税号</text>
					<input type="text" v-model="dataForm.number" @input="inputHandler($event, dataForm, 'number')" placeholder="请填写(税号)" class="value" placeholder-class="ph" />
				</view>
				<view class="u-item border-bottom">
					<text class="key min f-fc-primary">地址</text>
					<input type="text" v-model="dataForm.address" @input="inputHandler($event, dataForm, 'address')" placeholder="请填写地址" class="value" placeholder-class="ph" />
				</view>
				<view class="u-item border-bottom">
					<text class="key min f-fc-primary">电话</text>
					<input type="number" v-model="dataForm.phone" maxlength="11" placeholder="请填写电话" class="value" placeholder-class="ph" />
				</view>
				<view class="u-item border-bottom">
					<text class="key min f-fc-primary">开户行</text>
					<input type="text" v-model="dataForm.bank" placeholder="请填写开户行" class="value" placeholder-class="ph" />
				</view>
				<view class="u-item border-bottom">
					<text class="key min f-fc-primary">账户</text>
					<input type="number" v-model="dataForm.bank_num" placeholder="填写账户" class="value" placeholder-class="ph" />
				</view>
				<view class="u-item">
					<text class="key f-fc-primary">组织机构代码</text>
					<input type="text" v-model="dataForm.code" placeholder="填写组织机构代码" class="value" placeholder-class="ph" />
				</view>
			</block>
			<view class="u-item border-bottom" v-else>
				<text class="key f-fc-primary">身份证号码</text>
				<input type="idcard" v-model="dataForm.id_card" placeholder="请填写准确的身份证号码" class="value" placeholder-class="ph" />
			</view>
		</view>

		<view class="u-submit-btn-view"><button class="u-btn-primary f-fz16 f-fc-whilte">保 存</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataForm: {
				type: 1, // 抬头类型
				name: '', // 抬头名称
				number: '', // 抬头
				address: '', // 地址
				phone: '', // 电话
				bank: '', // 开户行
				bank_num: '', // 开户
				code: '' // 组织机构代码
			},
			rules: [
				{
					name: 'type',
					rule: ['required'],
					msg: ['请选择发票类型']
				},
				{
					name: 'name',
					rule: ['required', 'minLength:2', 'maxLength:10'],
					msg: ['请选择抬头名称', '抬头名称长度2-10位', '抬头名称长度2-10位']
				}
			],
			regs: {
				name: [/^\s{1,}/],
				number: [/[^\w_]/g],
				address: [/^\s{1,}/],
			}
		};
	},
	methods: {
		/**
		 * 选择type
		 * */

		selectType(type) {
			const that = this;
			that.dataForm.type = type;
			let dataForm = {};
			let rule = [];
			if (type === 1) {
				dataForm = {
					type: 1,
					name: that.dataForm.name,
					number: '', // 抬头
					address: '', // 地址
					phone: '', // 电话
					bank: '', // 开户行
					bank_num: '', // 开户
					code: '' // 组织机构代码
				};
				rule = [{}];
			} else {
				dataForm = {
					type: 1,
					name: that.dataForm.name,
					id_card: '' // 身份证号码
				};
				rule = [{}];
			}
			that.dataForm = dataForm;
		},
		
		/**
		 * 输入处理函数
		 * @param {Object} event 	- input事件回调
		 * @param {Object} target	- 所操作的对象
		 * @param {String} key		- 所操作对象的属性
		 * */ 
		inputHandler(event, target, key) {
			const that = this;
			that.throttle(()=> {
				target[key] = that.regs[key].reduce((str, ele) => {
					return str.replace(ele, '');
				}, event.detail.value);
				console.log('------------------');
				console.log(target[key]);
			}, null, 0, null);
		}
	},
	
};
</script>

<style lang="scss" scoped>
.u-list {
	.u-item {
		height: 90rpx;
		.key.min {
			width: 120rpx;
			height: 90rpx;
			line-height: 90rpx;
			position: relative;
			&::after {
				content: '';
				display: inline-block;
				width: 150rpx;
				height: 4rpx;
				background-color: #ffffff;
				position: absolute;
				bottom: 0;
				left: -30rpx;
				z-index: 1;
			}
		}
	}
}
.u-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40rpx;
	padding: 0 16rpx;
	font-size: 30rpx;
	color: #333333;
	background-color: #ffffff;
	border: 1rpx solid #777777;
	border-radius: 2rpx;
}
.u-tag.active {
	color: $uni-text-color-red;
	background-color: rgba($color: $uni-text-color-red, $alpha: 0.1);
	border: 2rpx solid $uni-text-color-red;
}
</style>
